<template>
	<view class="container">
		<tui-tabs :tabs="tabs" isFixed :currentTab="currentTab" selectedColor="#0ba9ff" sliderBgColor="#0ba9ff" @change="change" itemWidth="50%"></tui-tabs>
		<view @click="detail(item)" class="tui-order-item" v-for="(item, orderIndex) in tabs[currentTab].list" :key="orderIndex">
			<view class="tui-goods-item">
				<image :src="item.productCoverImg" class="tui-goods-img"></image>
				<view class="tui-goods-center">
					<view class="tui-goods-name">{{ item.productName }}</view>
					<view class="tui-goods-attr">进度{{ item.participationNum }}/{{ item.productPortionNum }}</view>
					<view class="lion-process"><lion-process :process="item.process"></lion-process></view>
					<view class="tui-goods-attr">已参与{{ item.userParticipationNum }}</view>
				</view>
				<view v-if="currentTab !== 2" class="tui-price-right">
					<view>{{ item.productGroupOrderState }}</view>
				</view>
				<view v-else class="tui-price-right"><view>未中奖</view></view>
			</view>
		</view>

		<tui-no-data imgUrl="/static/images/toast/img_nodata.png" v-if="!loadding && !tabs[currentTab].list.length">暂无订单</tui-no-data>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn" backgroundColor="#fafafa"></tui-nomore>
		<!--加载loadding-->
	</view>
</template>

<script>
import { userGroupListPage, orderAlipay } from '@/service/order.js';
export default {
	data() {
		return {
			tabs: [
				{
					name: '进行中',
					state: 'run',
					list: []
				},
				{
					name: '已中奖',
					state: 'win',
					list: []
				},
				{
					name: '未中奖',
					state: 'unWin',
					list: []
				}
			],
			currentTab: 0,
			pageNum: 1,
			loadding: false,
			pullUpOn: true,
			scrollTop: 0,

			orderState: ''
		};
	},
	onLoad() {
		this.getList();
	},
	methods: {
		change({ index }) {
			this.currentTab = index;
			this.pageNum = 1;
			this.tabs[this.currentTab].list = [];
			this.getList();
		},
		async getList() {
			let type = {
				spelling: '进行中',
				lottery: '开奖中',
				waitSet: '等待设置收货地址',
				waitSend: '等待发货',
				finished: '已完结'
			};
			try {
				this.loadding = true;
				const index = this.currentTab;
				const resp = await userGroupListPage({ pageNum: this.pageNum, pageSize: 10, state: this.tabs[index].state });
				resp.data = resp.data.map(v => {
					v.process = ((Number(v.participationNum) / Number(v.productPortionNum)) * 100).toFixed(0);
					v.productGroupOrderState = type[v.productGroupOrderState];
					return v;
				});
				if (this.pageNum == 1) {
					this.tabs[index].list = [];
				}
				this.tabs[index].list = this.pageNum == 1 ? resp.data : [...this.tabs[index].list, ...(resp.data || [])];
				this.pageNum++;
			} finally {
				this.loadding = false;
			}
		},

		detail(item) {
			uni.navigateTo(
				{
					url: 'detail'
				},
				{
					id: item.id
				}
			);
		}
	},
	async onPullDownRefresh() {
		this.pageNum = 1;
		await this.getList();

		uni.stopPullDownRefresh();
	},
	onReachBottom() {
		this.getList();
	}
};
</script>

<style scoped lang="scss">
page {
	background-color: #f3f3f3;
}
.container {
	padding-top: 90upx;
	padding-bottom: env(safe-area-inset-bottom);
}

.tui-order-list {
	margin-top: 80rpx;
}

.tui-order-item {
	background-color: #ffffff;
	border-radius: 20rpx;
	margin: 20upx auto 0;
	width: 710upx;
	overflow: hidden;
}

.tui-goods-title {
	width: 100%;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tui-order-status {
	color: #888;
	font-size: 26rpx;
}

.tui-goods-item {
	width: 100%;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
}

.tui-goods-img {
	margin-right: 20upx;
	width: 180rpx;
	height: 180rpx;
	display: block;
	flex-shrink: 0;
}

.tui-goods-center {
	flex: 1;
	padding: 20rpx 8rpx;
	box-sizing: border-box;
}

.tui-goods-name {
	max-width: 310rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 26rpx;
	line-height: 32rpx;
}

.tui-goods-attr {
	font-size: 22rpx;
	color: #888888;
	// line-height: 32rpx;
	padding-top: 10rpx;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.tui-price-right {
	text-align: center;
	font-size: 24rpx;
	color: $primary;
	line-height: 30rpx;
	padding-top: 80rpx;
}

.tui-color-red {
	color: #5677fc;
	padding-right: 30rpx;
}

.tui-goods-price {
	width: 100%;
	display: flex;
	color: #818181;
	align-items: flex-end;
	justify-content: flex-end;
	font-size: 24rpx;
}

.tui-size-24 {
	font-size: 24rpx;
	line-height: 24rpx;
}

.tui-price-large {
	font-size: 32rpx;
	line-height: 30rpx;
	font-weight: 500;
}

.tui-order-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background: #fff;
	padding: 10rpx 30rpx 20rpx;
	box-sizing: border-box;
}

.tui-btn-ml {
	margin-left: 20rpx;
}
.lion-process {
	height: 18upx;
	width: 300upx;
}
</style>
